<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>任务进度</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script type="text/javascript" src="../js/plugin/jquery.min.js"></script>
	<script type="text/javascript" src="../js/sybn_common.js"></script>
	<link rel="stylesheet" href="../js/plugin/bootstrap-3.3.5/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/fontawesome-4.2.0_ie7/4.2.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="../css/bootstrap_sybn_custom.css" />
	<script src="../js/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<style>
	html,body{font-size: 14px;padding:0px;margin:0px;}
	body{padding: 5px;}
	div, .progress{padding:0px;margin:0px;width:100%;}
	.progress{position: relative;}
	#progressMsg{font-weight:bold;position:absolute;left:0;width:100%;text-align:center;line-height:1.5; }
	</style>
	<script type="text/javascript">
	var jobInterval = null;
	$(document).ready(function() {
		jobInterval = setInterval("progressbarAjax()", 500);
	});
	function progressbarAjax() {
		var key = getQueryString("key");
		var callback = getQueryString("callback");
		var callbackName = getQueryString("callback_name");
		key = key || "test";
		var $bar = $("#progressbar");
		var $msg = $("#progressMsg");
		var $status = $("#status");
		$.ajax({
			url:"../api/job_v2/jobStatus.json?statusKey=" + key, 
			success : function(obj) {
				var job = obj.job;
				var maxTask = job.maxTask;
				var completeTask = job.completeTask;
				var jobStatus = job.jobStatus;
				var pie = (completeTask / maxTask * 100).toFixed(2);
				var msg = "进度:" + completeTask + "/" + maxTask + "(" + pie + "%)";
				$bar.attr("aria-valuenow", pie)[0].style.width = pie + "%";
				$msg.html(msg);
				$status.html(jobStatus);
				if (jobStatus.indexOf("任务完成") == 0) {
					clearInterval(jobInterval);
					$bar.addClass("progress-bar-success").removeClass("progress-bar-info");
					$bar.parent().removeClass("active");
					if (callback) {
						$("#callback_p").html("<a class='btn btn-success' href='"+callback+"'>"+callbackName+"</a>");
						window.open(callback);
					}
				}
			},
			error : function(obj) {
				$bar.addClass("progress-bar-warning").removeClass("progress-bar-info");
				$msg.html("任务出错");
				clearInterval(job);
			}
		});
	}
	</script>
</head>
<body>
<div class="progress progress-striped active">
	<div class="progress-bar progress-bar-info" role="progressbar" id="progressbar" 
		 aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
		 style="width: 0%;">
	</div>
	<div id="progressMsg">进度:0%</div>
</div>
<div id="status"></div>
<div id="callback_p"></div>
</body>
</html>